<template>
  <view class="service-detail-container">
    <!-- 服务详情头部 -->
    <view class="service-header">
      <image :src="service.image" mode="aspectFill" class="service-image"></image>
      <view class="service-info">
        <text class="service-name">{{ service.name }}</text>
        <view class="service-price">
          <text class="price-now">¥{{ service.price }}{{ service.unit }}</text>
          <text class="price-old">¥{{ service.originalPrice }}</text>
        </view>
        <view class="service-score">
          <rating-star :rating="service.score" size="20rpx"></rating-star>
          <text class="score-text">{{ service.score }}</text>
        </view>
        <text class="service-sales">已售{{ service.sales }}</text>
      </view>
    </view>

    <!-- 服务详情描述 -->
    <view class="service-description">
      <text class="description-title">服务详情</text>
      <text class="description-content">这里可以添加服务的详细描述信息。</text>
    </view>

    <!-- 立即预约按钮 -->
    <view class="reserve-btn" @click="handleReserve">
      立即预约
    </view>
  </view>
</template>

<script>
import RatingStar from '../../components/rating-star/rating-star.vue';

export default {
  components: {
    RatingStar
  },
  data() {
    return {
      service: {}
    };
  },
  onLoad(options) {
    // 根据传入的服务ID从index.vue的数据中找到对应的服务信息
    const hotServices = [
      { id: 1, name: '全屋深度保洁', price: 5, unit: '元/㎡', originalPrice: 6, image: '/static/images/services/service1.png', sales: 2345, score: 4.9 },
      { id: 2, name: '空调清洗', price: 89, unit: '元/台', originalPrice: 120, image: '/static/images/services/service2.png', sales: 1876, score: 4.8 },
      { id: 3, name: '冰箱清洗', price: 129, unit: '元/台', originalPrice: 169, image: '/static/images/services/service3.png', sales: 1563, score: 4.7 },
      { id: 4, name: '油烟机清洗', price: 159, unit: '元/台', originalPrice: 199, image: '/static/images/services/service4.png', sales: 1789, score: 4.9 }
    ];
    const serviceId = parseInt(options.id);
    this.service = hotServices.find(service => service.id === serviceId);
  },
  methods: {
    handleReserve() {
      uni.showToast({ title: '预约功能待开发', icon: 'none' });
    }
  }
};
</script>

<style lang="scss">
.service-detail-container {
  padding: 20rpx;
  background-color: #f5f5f5;

  .service-header {
    display: flex;
    background-color: #fff;
    border-radius: 12rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .service-image {
      width: 300rpx;
      height: 300rpx;
    }

    .service-info {
      padding: 16rpx;

      .service-name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }

      .service-price {
        display: flex;
        align-items: baseline;
        margin-bottom: 10rpx;

        .price-now {
          font-size: 30rpx;
          font-weight: bold;
          color: #FF7D00;
        }

        .price-old {
          font-size: 24rpx;
          color: #999;
          text-decoration: line-through;
          margin-left: 10rpx;
        }
      }

      .service-score {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;

        .score-text {
          font-size: 22rpx;
          color: #999;
          margin-left: 6rpx;
        }
      }

      .service-sales {
        font-size: 22rpx;
        color: #999;
      }
    }
  }

  .service-description {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 16rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

    .description-title {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }

    .description-content {
      font-size: 24rpx;
      color: #666;
    }
  }

  .reserve-btn {
    background-color: #FF7D00;
    color: #fff;
    text-align: center;
    padding: 20rpx;
    border-radius: 12rpx;
    font-size: 28rpx;
  }
}
</style>
